<template>
  <!-- App应用盒子 -->
  <div class="container">
    
    <div class="todoApp">

      <!-- 欢迎用户  + 后期 用户信息 组件 -->
      <Header />

      <main>
        <!-- 输入 组件 -->
        <CreateEvent @upudateOrginEventData='upudateOrginEventData'/>


        <section class="displayList">
          <!-- 事务选项 组件 -->
          <EventType 
            :currentEventDataType="currentEventDataType"
            @toggleEventType='toggleEventType'/>
          

          <!-- 已有事务列表 组件 -->
          <!-- 父组件 向子组件 传值 -->
          <EventList 
            :currentEventData='renderEventData'
            @upudateOrginEventData='upudateOrginEventData'/>
        </section>
      </main>


      
    </div>
    <!-- 脚部 组件 -->
    <Footer />

  </div>

  <!-- 开头动画组件 -->
  <transition leave-active-class="animate__animated animate__fadeOutUp">
    <InitAnime v-if='flag' @toggleFlag='toggleFlag' />
  </transition>

  <!-- 水纹 -->
  <div class="waterTipCont">
    <el-row>
      <el-col :span="5"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="5" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="5" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="9" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="9" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="5"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="5" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="5" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="9" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
      <el-col :span="9" :offset="3"><div class="grid-content">Welcome to SAM TodoApp!</div></el-col>
    </el-row>
  </div>
</template>

<script setup>
  import Header from "@/components/Header.vue";
  import Footer from "@/components/Footer.vue";
  import CreateEvent from "@/components/CreateEvent.vue";
  import EventType from "@/components/EventType.vue";
  import EventList from "@/components/EventList.vue";
  import InitAnime from "@/components/InitAnime.vue";

  import {ref,reactive,onBeforeMount,computed,watch} from 'vue'
  import {getEventData} from '@/utils/dataBaseTool.js'
  import JSS from '@/utils/JSONTool.js'
  import 'animate.css'



  //响应式数据 定义=========================
  // 从数据库 获取 原始数据 
  let originEventData = reactive({
    data:[]
  })
  // 当前 事件数据的 类型（全部：ALl;已完成：Done;未完成：unfinished）
  let currentEventDataType = ref('All')
  // 当前 渲染的事件数据
  let currentEventData = reactive({
    data:[]
  })

  //计算属性 监听currentEventDataType 变化 
  let renderEventData = computed(()=>{
    switch (currentEventDataType.value) {
      // 筛选完成的
      case 'Done':
        return originEventData.data.filter(item=>item.done)
        break;
      // 筛选未完成的
      case 'Unfinished':
        return originEventData.data.filter(item=>!item.done)
        break;
      default: return originEventData.data;
    }
  })

  // 方法定义==================
  // 更新 原始数据函数
  function upudateOrginEventData(){
    originEventData.data = getEventData()
  }

  // 事件类型更改 函数
  function toggleEventType(_type){
    currentEventDataType.value = _type
  }


  // 调用 生命周期函数
  onBeforeMount(()=>{
    //更新 原始数据函数
    upudateOrginEventData()
  })

  let flag = ref(true)

  // 动画加载后 修flag使其退出
  function toggleFlag(){
    setTimeout(()=>{
      flag.value = false  
    },1000)
  }

</script>

<style scoped>
  div.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  div.todoApp{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    padding: .15rem;
    width: 80%;
    /*max-width: 600px;*/
    min-height: 75%;
    border-radius:20px;
    /*background-color: rgba(255,255,255,0.66);*/
    box-shadow:
      6.7px 6.8px 5.3px rgba(0, 0, 0, 0.016),
      0px 0px 17.9px rgba(0, 0, 0, 0.024),
      10px 10px 80px rgba(0, 0, 0, 0.04)
    ;

    display: flex;
    flex-direction: column;
  }
  main{
    display: flex;
    flex: 1;

  }
  .displayList{
    padding: .25rem 0 0 .25rem;
    flex:2;

    display: flex;
    flex-direction: column;
  }

  @media screen and (max-width:750px){
    div.todoApp{
      width: 90%;
    }
    div.waterTipCont{
      display: none;
    }
    main{
      flex-direction:column ;
    }
  }

  /*水纹*/
  .waterTipCont{

    position: absolute;
    top: 0; 
    left: 0;  
    width: 100%;
    height: 100%;
    z-index:-1;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    overflow: hidden;
  }
  .el-row {
    margin-bottom: 10%;
  }
  /*.el-row:last-child {
    margin-bottom: 0;
  }*/
  .el-col {
    border-radius: 4px;
    color: #999;
  }
  .el-col:nth-child(2n){
    text-align: right;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    font-size: .16rem;
  }
</style>
